<!-- 柱状图 -->
<template>
	<div>
		<!-- <div class="title"><p>{{title}}</p></div> -->
		<div ref="barchart" :style="{height:height,width:width}"></div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      color:''
    };
  },
	props: {
		title: {
      type: String,
      default: '按日统计趋势'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '315px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
	watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.color = localStorage.getItem('isNightMode') || 'night'
    this.$nextTick(() => {
      this.initChart()
    });

  },
  updated() {
    this.myChart.dispose()
    this.initChart()
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
      this.setOptions(this.chartData)
    },
		setOptions(chartData){
      const StatusList = [
        { label: '标准服务', value: 2},
        { label: '高级服务', value: 3}
      ];
			this.myChart.setOption({
        grid: {
        left: 37,
        top: 50,
        containLabel: true
    },
				xAxis: {
					type: 'category',
					data: chartData.xAxis
				},
				yAxis: {
					type: 'value',
          splitLine: {
            lineStyle: {
              color: "#666", // 修改网格线颜色为浅灰色
              type: "dashed", // 添加虚线效果
              width: 1 // 线条宽度
            }
          }
				},
        legend:{
            data: ['GPT基础', 'GPT高级', '豆包', '本地Deepseek', 'Deepseek'],
            bottom:0,
          //  selectedMode:false
          textStyle: {
            color: this.color === "night" ? "#fff" : "#000" // 深色模式用白色，浅色模式用黑色
          }
        },
				tooltip: {
          trigger: "item",
					backgroundColor: '#fff',
          textStyle:{
              color:'#000'
            }
        },
				series: [
					{
            name:"GPT基础",
						data: chartData.t1,
						type: 'bar',
            stack:"stack",
						barWidth : 50,
            itemStyle: {
                  color:'#5fb87c'
                }
					},
          {
            name:"GPT高级",
						data: chartData.t2,
						type: 'bar',
            stack:"stack",
						barWidth : 50,
            itemStyle: {
                  color:'#409EFF'
                }
					},
          {
            name:"豆包",
						data: chartData.t3,
						type: 'bar',
            stack:"stack",
						barWidth : 50,
            itemStyle: {
                  color:'#6D8BFF'
                }
					},
          {
            name:"本地Deepseek",
						data: chartData.t4,
						type: 'bar',
            stack:"stack",
						barWidth : 50,
            itemStyle: {
                  color:'#FF7E6D'
                }
					},
          {
            name:"Deepseek",
						data: chartData.t5,
						type: 'bar',
            stack:"stack",
						barWidth : 50,
            itemStyle: {
                  color:'#4ECDC4'
                }
					}
				]
			})
      this.myChart.off('click');
			this.myChart.on('click',  (params) => {
        // console.log("myChart",params)
				this.$emit('barclick', params.name)
			});
		}
	}
};
</script>
<style scoped>
</style>
